/**
 * 可调整宽度的面板组件
 */

import React, { useState, useRef, useCallback, type ReactNode  } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';

interface ResizablePanelProps {
  children: ReactNode;
  defaultWidth: number; // 百分比
  minWidth?: number; // 像素
  maxWidth?: number; // 像素
  position: 'left' | 'right';
  collapsed: boolean;
  onWidthChange?: (width: number) => void;
  onToggleCollapse?: () => void;
  className?: string;
}

export default function ResizablePanel({
  children,
  defaultWidth,
  minWidth = 200,
  maxWidth = 500,
  position,
  collapsed,
  onWidthChange,
  onToggleCollapse,
  className = '',
}: ResizablePanelProps) {
  const [width, setWidth] = useState(defaultWidth);
  const [isResizing, setIsResizing] = useState(false);
  const panelRef = useRef<HTMLDivElement>(null);
  const startXRef = useRef(0);
  const startWidthRef = useRef(0);

  // 开始拖拽
  const handleMouseDown = useCallback((e: React.MouseEvent) => {
    e.preventDefault();
    setIsResizing(true);
    startXRef.current = e.clientX;
    startWidthRef.current = panelRef.current?.offsetWidth || 0;

    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  }, []);

  // 拖拽中
  const handleMouseMove = useCallback((e: MouseEvent) => {
    if (!isResizing) return;

    const deltaX = position === 'left' ? e.clientX - startXRef.current : startXRef.current - e.clientX;
    const newWidth = Math.max(minWidth, Math.min(maxWidth, startWidthRef.current + deltaX));
    
    setWidth(newWidth);
    onWidthChange?.(newWidth);
  }, [isResizing, position, minWidth, maxWidth, onWidthChange]);

  // 结束拖拽
  const handleMouseUp = useCallback(() => {
    setIsResizing(false);
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
  }, [handleMouseMove]);

  // 切换折叠状态
  const handleToggleCollapse = useCallback(() => {
    onToggleCollapse?.();
  }, [onToggleCollapse]);

  if (collapsed) {
    return (
      <div className={`flex-shrink-0 bg-card border-r border-border ${className}`}>
        <div className="h-full flex flex-col">
          {/* 折叠状态的展开按钮 */}
          <div className="p-2 border-b border-border">
            <button
              onClick={handleToggleCollapse}
              className="w-8 h-8 flex items-center justify-center rounded-md hover:bg-accent transition-colors"
              title={position === 'left' ? '展开左侧面板' : '展开右侧面板'}
            >
              {position === 'left' ? (
                <ChevronRight className="w-4 h-4 text-muted-foreground" />
              ) : (
                <ChevronLeft className="w-4 h-4 text-muted-foreground" />
              )}
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div
      ref={panelRef}
      className={`flex-shrink-0 bg-card border-border ${
        position === 'left' ? 'border-r' : 'border-l'
      } ${className}`}
      style={{ width: `${width}px` }}
    >
      <div className="h-full flex">
        {/* 左侧面板内容 */}
        {position === 'left' && (
          <div className="flex-1 flex flex-col">
            {/* 面板头部 */}
            <div className="p-3 border-b border-border flex items-center justify-between">
              <h3 className="text-sm font-medium text-foreground">分类导航</h3>
              <button
                onClick={handleToggleCollapse}
                className="w-6 h-6 flex items-center justify-center rounded hover:bg-accent transition-colors"
                title="折叠左侧面板"
              >
                <ChevronLeft className="w-4 h-4 text-muted-foreground" />
              </button>
            </div>
            {/* 面板内容 */}
            <div className="flex-1 overflow-hidden">
              {children}
            </div>
          </div>
        )}

        {/* 拖拽手柄 */}
        <div
          className={`w-1 bg-border hover:bg-muted cursor-col-resize transition-colors ${
            isResizing ? 'bg-muted-foreground' : ''
          }`}
          onMouseDown={handleMouseDown}
        />

        {/* 右侧面板内容 */}
        {position === 'right' && (
          <div className="flex-1 flex flex-col">
            {/* 面板头部 */}
            <div className="p-3 border-b border-border flex items-center justify-between">
              <h3 className="text-sm font-medium text-foreground">文档详情</h3>
              <button
                onClick={handleToggleCollapse}
                className="w-6 h-6 flex items-center justify-center rounded hover:bg-accent transition-colors"
                title="折叠右侧面板"
              >
                <ChevronRight className="w-4 h-4 text-muted-foreground" />
              </button>
            </div>
            {/* 面板内容 */}
            <div className="flex-1 overflow-hidden">
              {children}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
